<template>
    <div>
        <!-- 头部导航栏 -->
        <div>
            <van-nav-bar fixed>
                <template #left>
                    <img class="logo" src="@/assets/logo.png" alt="">
                </template>
                <template v-slot:right>
                    <van-icon name="search" size="0.48rem" color="#fff" />
                </template>
            </van-nav-bar>
        </div>
        <!-- Tab标签页 -->
        <div class="main">
            <van-tabs v-model="channelId" sticky offset-top="1.226667rem" animated @change="tabsChange">
                <van-tab v-for="item in userChannelsList" :title="item.name" :key="item.id" :name="item.id">
                    <ArticleList :channelId="channelId"></ArticleList>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
    import { getUserChannelsAPI} from '@/api'
    import ArticleList from './components/ArticleList.vue'
    export default {

        data() {
            return {
                channelId: 0,
                //用户频道
                userChannelsList: [],
            };
        },
        components: {
            ArticleList
        },
        async created() {
            this.tabsChange()
        },
        mounted() {

        },

        methods: {
            async tabsChange() {
                //获取用户频道列表，若无token则返回默认值
                const res = await getUserChannelsAPI()
                this.userChannelsList = res.data.data.channels
            }
        },
    };
</script>

<style lang="less" scoped>
    .logo {
        width: 100px;
        height: 30px;
    }

    .main {
        padding-top: 46px;
        padding-bottom: 50px
    }
</style>